<template>
  <div class="about">
    <h1>收藏点赞</h1>
    <h1>图标是http://www.fontawesome.com.cn/icons-ui/</h1>
    <h1>动画是https://daneden.github.io/animate.css/</h1>
    <div>
      <i class="fa fa-heart-o fa-5x animated swing"
         @click="colour"
         v-if="show">
      </i>
      <i class="fa fa-heart fa-5x animated swing"
         :class="fontclass"
         v-if="!show"
         @click="colour">
      </i>
    </div>

    <div>
      <i class="fa fa-thumbs-o-up fa-5x animated swing"
         v-if="show2"
         @click="colour2">
      </i>
      <i class="fa fa-thumbs-up fa-5x animated swing"
         :class="fontclass2"
         v-if="!show2"
         @click="colour2">
      </i>
    </div>
  </div>
</template>
<script>

export default {
  name: '',
  props: [''],
  data () {
    return {
      show: true,
      show2: true,
      fontclass: "",
      fontclass2: ""
    };
  },

  components: {},

  computed: {},

  beforeMount () { },

  mounted () {

  },

  methods: {

    colour () {


      if (this.show) {
        this.show = false;
        this.fontclass = "hover";
      } else if (!this.show) {
        this.show = true;
        this.fontclass = "";
      }

    },
    colour2 () {

      if (this.show2) {
        this.show2 = false;
        this.fontclass2 = "hover2";
      } else if (!this.show2) {
        this.show2 = true;
        this.fontclass2 = "";
      }

    }

  },

  watch: {}

}

</script>

<style  scoped>
.hover {
  color: #ee3f4d;
}
.hover2 {
  color: pink;
}
</style>
